<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table1</title>
    <!--   <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"> -->
    <!-- <script src="./layui/layui.js"></script> -->
    <link rel="stylesheet" type="text/css" href="layui\css\layui.css">
    <script src="layui\layui.js"></script>

</head>

<body>


    <!-- 这种写法写js里面 -->

    <hr>

    <table id="my_table"" ></table>

    
    <script>
        layui.use('table', function () {
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#my_table'  //绑定容器
                , height: 312
                , url: 'https://www.layui.com/demo/table/user/' //数据接口
                , page: true //开启分页
                , dataType: 'JSONP'  // 处理Ajax跨域问题
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
                    , { field: 'username', title: '用户名', width: 80 }
                    , { field: 'sex', title: '性别', width: 80, sort: true, templet: '#sexTpl' }
                    , { field: 'city', title: '城市', width: 80 }
                    , { field: 'sign', title: '签名', width: 177 }
                    , { field: 'experience', title: '积分', width: 80, sort: true }
                    , { field: 'score', title: '评分', width: 80, sort: true }
                    , { field: 'classify', title: '职业', width: 80 }
                    , { field: 'wealth', title: '财富', width: 135, sort: true, templet: '#wealthTpl' }
                ]]
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);

                    //得到当前页码
                    console.log(curr);

                    //得到数据总量
                    console.log(count);
                }
            });

        });
    </script>
</body >

</html>

<!-- C:\Users\admin\AppData\Local\Google\Chrome\Application\chrome.exe --user-data-dir=" c:\ChromeDebug" --test-type
        --disable-web-security -->